<template>
  <div class="jd-mall">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <div class="container flex-between">
        <div class="location">
          <span><el-icon><Location /></el-icon> 北京</span>
        </div>
        <div class="nav-links">
          <a href="#">你好，请登录</a>
          <a href="#" class="highlight">免费注册</a>
          <a href="#">我的订单</a>
          <a href="#">我的京东</a>
          <a href="#">京东会员</a>
          <a href="#">企业采购</a>
          <a href="#">客户服务</a>
          <a href="#">网站导航</a>
          <a href="#">手机京东</a>
        </div>
      </div>
    </div>

    <!-- 头部搜索区域 -->
    <div class="header">
      <div class="container flex-between">
        <div class="logo">
          <a href="/"><img src="https://img10.360buyimg.com/img/jfs/t1/31062/17/12911/7947/5cb8a41aEdc80c92f/b041c8498584296c.png" alt="京东"></a>
        </div>
        <div class="search-box">
          <div class="flex">
            <input type="text" class="search-input" placeholder="热门好物，低至5折">
            <button class="search-btn">搜索</button>
          </div>
          <HotSearch />
        </div>
        <div class="shopping-cart">
          <el-button type="danger" class="cart-btn">
            <el-icon><ShoppingCart /></el-icon>
            我的购物车
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主导航 -->
    <div class="main-nav">
      <div class="container flex">
        <div class="all-category">全部商品分类</div>
        <div class="nav-item"><a href="#">京东超市</a></div>
        <div class="nav-item"><a href="#">数码电器</a></div>
        <div class="nav-item"><a href="#">京东生鲜</a></div>
        <div class="nav-item"><a href="#">京东国际</a></div>
        <div class="nav-item"><a href="#">京东服饰</a></div>
        <div class="nav-item"><a href="#">京东家电</a></div>
        <div class="nav-item"><a href="#">生活服务</a></div>
        <div class="nav-item"><a href="#">爱回收</a></div>
        <div class="nav-item"><a href="#">京东二手</a></div>
      </div>
    </div>

    <!-- 页面内容 -->
    <div class="content">
      <slot />
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <div class="container">
        <div class="footer-links">
          <div class="link-group">
            <h4>购物指南</h4>
            <a href="#">购物流程</a>
            <a href="#">会员介绍</a>
            <a href="#">生活旅行</a>
            <a href="#">常见问题</a>
          </div>
          <div class="link-group">
            <h4>配送方式</h4>
            <a href="#">上门自提</a>
            <a href="#">211限时达</a>
            <a href="#">配送服务查询</a>
            <a href="#">配送费收取标准</a>
          </div>
          <div class="link-group">
            <h4>支付方式</h4>
            <a href="#">货到付款</a>
            <a href="#">在线支付</a>
            <a href="#">分期付款</a>
            <a href="#">公司转账</a>
          </div>
          <div class="link-group">
            <h4>售后服务</h4>
            <a href="#">售后政策</a>
            <a href="#">价格保护</a>
            <a href="#">退款说明</a>
            <a href="#">返修/退换货</a>
          </div>
          <div class="link-group">
            <h4>特色服务</h4>
            <a href="#">会员特权</a>
            <a href="#">夺宝岛</a>
            <a href="#">企业采购</a>
            <a href="#">礼品卡</a>
          </div>
        </div>
        <div class="copyright">
          <p>京东仿站 版权所有© 2024 JD.com 保留一切权利</p>
          <p>京ICP备11041704号 | 京公网安备11000002000088号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ShoppingCart, Location } from '@element-plus/icons-vue'
import HotSearch from '~/components/common/HotSearch.vue'
</script>

<style lang="scss" scoped>
.jd-mall {
  min-width: 1200px;
}

.top-bar {
  .location {
    display: flex;
    align-items: center;
    
    .el-icon {
      margin-right: 3px;
      font-size: 14px;
    }
  }
  
  .nav-links {
    a {
      margin: 0 10px;
      font-size: 12px;
      
      &.highlight {
        color: var(--primary-color);
      }
    }
  }
}

.header {
  padding: 20px 0;
  
  .logo {
    img {
      width: 190px;
    }
  }

  .search-box {
    width: 550px;
    
    .search-input {
      width: 450px;
      height: 36px;
      border: 2px solid var(--primary-color);
      border-right: none;
      padding: 0 15px;
      font-size: 14px;
      
      &:focus {
        outline: none;
      }
    }
    
    .search-btn {
      width: 80px;
      height: 36px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      font-size: 16px;
      cursor: pointer;
      
      &:hover {
        background-color: #c81623;
      }
    }
  }
  
  .cart-btn {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    
    .el-icon {
      margin-right: 5px;
    }
  }
}

.main-nav {
  a {
    color: white;
  }
  
  .all-category {
    width: 190px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    background-color: #c81623;
  }
  
  .nav-item {
    margin: 0 10px;
    position: relative;
    
    &:hover {
      background-color: #c81623;
    }
  }
}

.content {
  min-height: 500px;
}
</style> 